<template>
  <view class="dialog">
    <view class="card">
      <view class="card-title">
        <text>换新信息填写</text>
        <image
          class="ic-close"
          src="../static/ic_close2.png"
          @click="emits('close')"
        >
        </image>
      </view>
      <view style="padding: 20rpx 30rpx; line-height: 40rpx">
        尊敬的用户：<br />
        您好！后台已接收到您的换新申请，请同步提供门店收件信息，以便后续进行镜片加工及上框，信息提交后，我们将尽快审核，并在审核通过后根据您最新的视力复查信息安排相应的镜片邮寄。谢谢！
      </view>
      <view class="card-row">
        <view class="key"> 邮寄地址 </view>
        <input
          v-model="RecievAddress"
          class="value"
          placeholder="请输入邮寄地址"
        />
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="key"> 收件人 </view>
        <input v-model="Receiver" class="value" placeholder="请输入收件人" />
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="key"> 联系方式 </view>
        <input
          v-model="RecievPhone"
          class="value"
          placeholder="请输入联系方式"
        />
      </view>
      <view class="card-divider"></view>
      <view class="submit" @click="submit">提交</view>
    </view>
  </view>
</template>
<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  receiver: Object,
});
const emits = defineEmits(["close", "submit"]);
const Receiver = ref(props.receiver.Receiver);
const RecievPhone = ref(props.receiver.RecievPhone);
const RecievAddress = ref(props.receiver.RecievAddress);
watch(
  () => props.receiver,
  (newVal) => {
    Receiver.value = newVal.Receiver;
    RecievPhone.value = newVal.RecievPhone;
    RecievAddress.value = newVal.RecievAddress;
  }
);
function submit() {
  emits("submit", {
    Receiver: Receiver.value,
    RecievPhone: RecievPhone.value,
    RecievAddress: RecievAddress.value,
  });
}
</script>
<style lang="scss" scoped>
.dialog {
  background-color: white;
  border-radius: 30rpx;
  // height: 200rpx;
  width: calc(100vw - 70rpx);
  overflow: hidden;
  .card {
    display: flex;
    // align-items: center;
    flex-direction: column;
    .card-title {
      font-size: 35rpx;
      padding: 20rpx 0;
      font-family: "yshst" !important;
      background: #9fdaff;
      color: #000;
      text-align: center;
      position: relative;
      .ic-close {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right: 40rpx;
        top: 20rpx;
        padding: 8rpx;
        box-sizing: border-box;
      }
    }
    .card-row {
      display: flex;
      align-items: center;
      padding: 20rpx 30rpx;
      .key {
        font-size: 30rpx;
        width: 150rpx;
        // text-align: center;
        color: black;
      }
      .value {
        flex: 1;
        font-size: 30rpx;
        padding: 0 20rpx;
        color: black;
      }
    }
    .card-divider {
      height: 2rpx;
      background: #e4f2fa;
      margin: 0 30rpx;
    }
    .submit {
      background: #9fdaff;
      color: black;
      font-size: 35rpx;
      text-align: center;
      padding: 13rpx 0;
      border-radius: 100rpx;
      width: 400rpx;
      align-self: center;
      margin: 30rpx 0;
    }
  }
}
</style>